<!-- 该页面为发现页的展示 -->
<template>
	<view>
		<!-- 顶部搜索栏 -->
		<van-search
		  v-model="value"
		  placeholder="请输入搜索关键词"
		  use-action-slot
		  @search="onSearch"
		  class="research"
		  @focus="isGetFocus=true"
		  @blur="isGetFocus=false"
		>
		<view slot="action" bind:tap="onCancel" v-if="isGetFocus">取消</view>
		</van-search>
		<!-- 下面展示的动态内容 -->
		<view class="width-95 flex-just" style="position: relative;top: 80rpx;">
			<view class="flex-column left-right">
				<view class="picture-out-border" v-for="(item,index) in imageList" :key="index" v-if="index%2 == 0">
					<view class="picture-in-box">
						<image :src='item' mode="widthFix" style="width:100%;"></image>
							<text class='picture-in-box-text text-cut'>今天晚上要肝实训今天晚上要肝实训</text>
						<view class="bottom-box flex-just">
							<view class="left-right-box flex-just">
								<view class="img-box">
									<open-data type="userAvatarUrl" class="img"></open-data>
								</view>
								<view class="text-box">
									<text class="text-cut">Yang</text>
								</view>
							</view>
							<view class="left-right-box flex-row">
									<image src="/static/research/dianzangray.png" class="little-icon"></image>
								<text>111</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="flex-column left-right">
				<view class="picture-out-border" v-for="(item,index) in imageList" :key="index" v-if="index%2 != 0">
					<view class="picture-in-box">
						<image :src='item' mode="widthFix" style="width:100%;"></image>
							<text class='picture-in-box-text text-cut'>今天晚上要肝实训今天晚上要肝实训</text>
						<view class="bottom-box flex-just">
							<view class="left-right-box flex-just">
								<view class="img-box">
									<open-data type="userAvatarUrl" class="img"></open-data>
								</view>
								<view class="text-box">
									<text class="text-cut">Yang</text>
								</view>
							</view>
							<view class="left-right-box flex-row">
									<image src="/static/research/dianzangray.png" class="little-icon"></image>
								<text>111</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				// url: '/static/corporation/picture.jpg'
				url: '/static/login/start.png',
				// 是否获得焦点
				isGetFocus: false,
				imageList: ['/static/login/start.png','/static/research/user.jpg','/static/research/user.jpg','/static/research/user.jpg']
			}
		},
		methods: {
			onSearch:function(e){
				this.value = e.detail
				console.log(e.detail)
			}
		}
	}
</script>

<style>
.research-box{
	border: 1px solid #BBBBBB;
	border-radius: 5px;
}
/* 分为左右两列 */
.left-right{
	width:50%;
	height:100%;
}
/* 显示图片的边框 */
.picture-out-border{
	width: 83%;
	height: 100%;
	border: 1px solid #D8D8D8;
	border-radius: 5px;
	padding: 20rpx;
	/* float: left; */
	margin: 7rpx;
}
.picture-in-box{
	width: 98%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	text-align: left;
}
.picture-in-box-text{
	font-size: 14px;
	font-weight: bold;
	padding: 10rpx;
}
/* 底部的发布人信息等 */
.bottom-box{
	width: 100%;
	height: 50rpx;
	margin-top: 15rpx;
}
.left-right-box{
	width: 40%;
	height: 100%;
}
/* 头像 */
.img-box{
	width: 50rpx;
	height: 50rpx;
	border: 1px solid #FFFFFF;
	border-radius: 50%;
	overflow: hidden;
}
.img{
	width: 100%;
	height: 100%;
}
.text-box{
	width: 50%;
	height: 50rpx;
}
.left-right-box text{
	height:50rpx;
	line-height: 50rpx;
	font-size: 13px;
	color: #8a8a8a;
	margin-left: 5%;
}
.little-icon{
	width: 40rpx;
	height: 40rpx;
	margin-top: 5rpx;
}
</style>
